<!DOCTYPE html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>个人资料</title>
	<link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
		<link rel="stylesheet" type="text/css" href="../../css/aui.css" />

    <style>
    	html, body {width: 100%;min-height: 100%;background: #f0f0f0;}
    	.h20 {height: 0.5rem;background: #f0f0f0;}

		/* 数据 */
    .declare li .aui-list-item {
      padding: 0.75rem;
    }
    .declare .aui-list-item-right h4 {
      color: #999;
    }
    .declare .aui-list-item-right h5 {
      color: #ff9800;
    }
    .declare .aui-list-item-right h6 {
      color: #2997e4;
    }
		.declare .aui-list-item-right input {
      color: #333333;
			font-size: 0.6rem;
			text-align: right;
    }
    .declare .aui-list-item-title h4 {
      color: #333;
    }
    .declare .aui-list-item-title h5 {
      color: #2997e4;
    }
    .declare .aui-list-item-title h6 {
      color: #999;
    }
		.aui-list .aui-list-item-right, .aui-list-item-title-row em {
			max-width: none;
		}
    .dataIco {
      width: 2.5rem;
			height: 2.5rem;
			border-radius: 2.5rem;
    }
    .declare .xq input {
      color: #999;
    }
		.declare .xq input:focus {
			color: #333;
		}
    .declare ul,.declare ul li:nth-of-type(1) .aui-list-item,.declare ul li:nth-last-of-type(1) .aui-list-item {
      background-size: 0;
    }
    .save_but {
      background-color: #2997e4;
      font-size: 0.8rem;
      color: #fff;
      padding: 0.5rem 0;
      margin: 2rem 0.75rem 0;
      text-align: center;
      border-radius: 4px;
    }
		.declare .aui-list-item-inner.aui-list-item {
			background-size: 0;
			border: 1px solid #f0f0f0;
		}
    </style>
</head>
<body>

	<div id="app" v-cloak>

	<!-- 第一块 -->
    <div class="h20"></div>
	<div class="aui-content declare">
	    <ul class="aui-list aui-list-in">
	        <li>
	            <div class="aui-list-item-inner aui-list-item">
	                <div class="aui-list-item-title declare_header">
										<h4>头像</h4>
									</div>
	                <div class="aui-list-item-right" @click="showAction()">
										<div v-if="data.headImg" class="dataIco" :style="'background: url('+ data.headImg +') center/cover no-repeat'"></div>
										<div v-else class="dataIco" style="background: url(../../image/wdr@3x.png) center/cover no-repeat"></div>
	                </div>
	            </div>
	        </li>
	    </ul>
	</div>
	<div class="h20"></div>

	<!-- 第二块 -->
  <div class="aui-content declare">
	    <ul class="aui-list aui-list-in">
	        <li>
	            <div class="aui-list-item-inner aui-list-item">
	                <div class="aui-list-item-title">
										<h6>昵称</h6>
									</div>
	                <div class="aui-list-item-right">
	                	<!-- <span>{{data.nickname}}</span> -->
										<input type="text" v-model="data.nickname">
	                </div>
	            </div>
	        </li>
          <li>
	            <div class="aui-list-item-inner aui-list-item">
	                <div class="aui-list-item-title">
										<h6>地区</h6>
									</div>
	                <div class="aui-list-item-right">
	                	<!-- <span>{{data.address}}</span> -->
										<input type="text" v-model="data.address">
	                </div>
	            </div>
	        </li>
					<li>
	            <div class="aui-list-item-inner aui-list-item">
	                <div class="aui-list-item-title">
										<h6>年龄</h6>
									</div>
	                <div class="aui-list-item-right">
	                	<!-- <span>{{data.age}}</span> -->
										<input type="text" v-model="data.age">
	                </div>
	            </div>
	        </li>
          <li>
	            <div class="aui-list-item-inner aui-list-item">
	                <div class="aui-list-item-title">
										<h6>职业</h6>
									</div>
	                <div class="aui-list-item-right">
	                	<!-- <span>{{data.profession}}</span> -->
										<input type="text" v-model="data.profession">
	                </div>
	            </div>
	        </li>
	    </ul>
	</div>
	<div class="h20"></div>

	<!-- 第三块 -->
	<div class="aui-content declare">
	    <ul class="aui-list aui-list-in">
	        <li>
	            <div class="aui-list-item-inner aui-list-item">
	                <div class="aui-list-item-title">
										<h6>兴趣</h6>
									</div>
	                <div class="aui-list-item-right xq">
	                	<!-- <h4>{{data.interest}}</h4> -->
										<input type="text" v-model="data.interest">
	                </div>
	            </div>
	        </li>
	    </ul>
	</div>

  <!-- 保存按钮 -->
  <div class="save_but" @click="Submit()">
    保存
  </div>

	<div class="h20"></div>
</div>

</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript">
apiready = function() {
	var URL = 'http://kexiecs.unohacha.com/kexieScore';

	var app = new Vue({
		el: '#app',
		data: {
			data: {
				userid: '',
				nickname: '',
				address: '',
				age: '',
				profession: '',
				interest: '',
				sex: '',
				headImg: ''
			},
			token: '',
		},
		created: function() {
			var $_this = this;
			if(!$api.getStorage('token')){
        api.confirm( {
            title: '是否登录',
            msg: '确认是否登录？',
            buttons: [ '确定', '取消' ]
          }, function ( ret, err ) {
            var index = ret.buttonIndex;
            if ( index == 1 ) {
              api.openWin({
                name: 'login',
                url: '../five_frame/login_header.html',
                delay: 200,
                bounces: false
              });
              return;
            } else {
              api.closeWin({
                  name: name
              });
              return
            }
          })
          return
        }
			api.ajax({
			    url: window.Url.getUsers,
			    method: 'get',
          headers: {
			        'Content-Type': 'application/json',
              'baseParams': $api.getStorage('token') //token
          },
			},function(ret, err){
			    if (ret) {
						$_this.data = ret.data
			        // alert( JSON.stringify( ret ) );
			    } else {
			        alert( JSON.stringify( err ) );
			    }
			});

			$_this.token = $api.getStorage('token') || '';

			// api.alert({ msg:$_this.data })
		},
		methods: {
			Submit:function() {
				var $_this = this;
				if ($_this.data.age != '' && !/^[0-9]{0,3}$/.test($_this.data.age)) {
						api.toast({ msg: '年龄填写有误！',duration: 2000,location:'middle' });
						return
				}
				api.ajax({
				 url: window.Url.updatetUser,
				 method: 'POST',
				 headers: {
					 'Content-Type': 'application/json',
					 'baseParams':$_this.token
				 },
				 data:{
					 body:{
							userid: $_this.data.userid,
							nickname: $_this.data.nickname,
							address: $_this.data.address,
							age: $_this.data.age,
							profession: $_this.data.profession,
							interest: $_this.data.interest,
							sex: $_this.data.sex,
							headImg: $_this.data.headImg
					 }
				 },
				 timeout: 300,
			 }, function(ret, err) {
					 if (ret) {
						 // api.alert({ msg: JSON.stringify(ret) });
						 if (ret.code == 2) {
                  alert('用户未登录，请返回登录')
                  $api.rmStorage('token')
                  $api.rmStorage('data')
                  goback()
                   return
                } else if (ret.code == 0) {
							$api.rmStorage('data');
							 $_this.data = ret.data
							 $_this.reload()
							api.toast({ msg: '修改成功！',duration: 2000,location:'middle' });
						 } else {
						api.toast({ msg: '数据填写有误！',duration: 2000,location:'middle' });
						 }
					 } else {
							 api.alert({ msg: JSON.stringify(err) });
					 }
			 })
		 },
		 reload:function() {
			var js = 'window.location.reload();';
		   api.execScript({
		       name: 'root',
		       script: js
		   });
		 },
		 // 上传图片
		 showAction: function (){
			 var $_this = this
			 api.actionSheet({
					 title: '活动图片上传',
					 cancelTitle: '取消',
					 buttons: ['拍照','从手机相册选择']
			 }, function(ret, err) {
					 if (ret) {
							 $_this.getPicture(ret.buttonIndex);
					 }
			 });
		 },
		 getPicture: function (sourceType) {
			 var $_this = this
						 if(sourceType==1){ // 拍照
								 api.getPicture({
										 sourceType: 'camera',
										 encodingType: 'jpg',
										 mediaValue: 'pic',
										 allowEdit: false,
										 destinationType: 'base64',
										 quality: 90,
										 saveToPhotoAlbum: true
								 }, function(ret, err) {
										 if (ret) {

											 var formData=ret.data;
											 var formData=ret.base64Data;
											 api.ajax({
													 method:"post",
													 url:window.Url.addPicture,
															data: {
																files: {file: ret.data}
															}

											 },function(ret,err){
													 if(ret){
														 if(ret.error == '0')
														 {
																 $_this.data.headImg = ret.url
														 }
														 else{
															 api.alert({msg:ret.message});
														 }
														 console.log("图片返回"+JSON.stringify(ret))
													 }else{
															 api.toast({
																 msg : '你没有选择图片',
																 location : 'middle'
															 })
													 }
											 })
										 }else {
												 alert(JSON.stringify(err));
										 }
								 });
						 }
						 else if(sourceType==2){ // 从相机中选择
								 api.getPicture({
												 sourceType: 'album',
												 encodingType: 'png',
												 mediaValue: 'pic',
												 destinationType: 'url',
												 allowEdit:true,
												 quality: 50,
												 saveToPhotoAlbum:false,
												 targetWidth: 750,
												 targetHeight: 750
										 }, function(ret, err) {
												 if (ret) {
														 var formData=ret.data;
														 // $('.img').prop('src',ret.data);
														 var formData=ret.base64Data;
														 api.ajax({
																 method:"post",
																 url:window.Url.addPicture,
																		data: {
																			files: {file: ret.data}
																		}

														 },function(ret,err){
																 if(ret){
																	 if(ret.error == '0')
																	 {
																			 $_this.data.headImg = ret.url
																	 }
																	 else{
																		 api.alert({msg:ret.message});
																	 }
																	 console.log("图片返回"+JSON.stringify(ret))
																 }else{
																		 api.toast({
																			 msg : '你没有选择图片',
																			 location : 'middle'
																		 })
																 }
														 })
												 } else {
														 api.alert({msg:JSON.stringify(err)});
												 }
								 });
						 }
				 }
		}
	})
	function goback () {
		api.closeWin({name:api.pageParam.name});
	}
}
</script>
</html>
